<!--
 * @Author: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @Date: 2022-05-26 21:21:35
 * @LastEditors: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @LastEditTime: 2022-05-30 21:26:02
 * @FilePath: \vue-2202\src\views\shops\shoplist\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="shopList">
    <div
      class="goodslist-item"
      v-for="(v, i) in goodsList"
      :key="i"
      @click="goDetail('/home/goodsinfo', v.id)"
    >
      <div class="img-box">
        <img v-lazy="v.img_url" alt="" />
      </div>
      <h2 class="title">{{ v.title }}</h2>
      <div class="info">
        <div class="desc">${{ v.market_price }}</div>
        <div class="sell">
          <span>热卖中</span>
          <span>剩余{{ v.stock_quantity }}件</span>
        </div>
      </div>
    </div>
    <van-loading
      type="spinner"
      size="24px"
      color="#1989fa"
      v-if="isLoading"
      class="loading"
    />
    <van-button @click="toMore" class="but" type="primary" block v-else>{{
      moreText
    }}</van-button>
  </div>
</template>
<script>
import { goods } from "@/api";
export default {
  data() {
    return {
      goodsList: [],
      page: 1,
      limit: 6,
      hasMore: false,
      isLoading: false,
    };
  },
  methods: {
    async getGoods() {
      const res = await goods({ page: this.page, limit: this.limit });
      this.goodsList = res.data.message;

      console.log(this.goodsList);
    },
    async toMore() {
      this.page++;
      this.isLoading = true;
      const res = await goods({ page: this.page, limit: this.limit });
      setTimeout(() => {
        this.goodsList = [...this.goodsList, ...res.data.message];
        this.isLoading = false;
      }, 1000);
      this.hasMore = this.page * this.limit > res.data.count;
    },
    getScroll(event) {
      if (event.target.scrollBottom == 0) {
        this.toMore();
      }
    },
  },
  created() {
    this.getGoods();
  },
  computed: {
    moreText() {
      return this.hasMore ? "我也是有底线的" : "加载更多>>>";
    },
  },
};
</script>
<style lang="scss">
.shopList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
  .loading {
    text-align: center;
    display: block;
    width: 100%;
  }
  .but {
    background-color: #fff;
    color: #969799;
    border: 0;
  }
  .goodslist-item {
    width: 48%;
    border: 1px solid #eee;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    .img-box {
      width: 164px;
      height: 164px;
      img {
        width: 164px;
        height: 164px;
      }
    }
    .title {
      font-size: 14px;
    }
    .info {
      font-size: 12px;
      .desc {
        color: red;
      }
      .sell {
        margin-top: 10px;
        &:first-child {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
